<template>
  <el-card class="task-category-card">
    <div slot="header">任务分类</div>
    <div id="categoryChart" style="width: 100%; height: 200px;"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'TaskCategory',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(document.getElementById('categoryChart'));
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 30, name: '产品设计' },
              { value: 25, name: '技术开发' },
              { value: 15, name: '市场运营' },
              { value: 10, name: '客户服务' },
              { value: 20, name: '其他' }
            ],
            label: {
              show: true,
              position: 'outside'
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.task-category-card {
  margin-top: 20px;
}
</style>
